Vuelidate — Dynamic Validation

Vue.js doesn’t come with any form validation capabilities by default.

Therefore, we need to add our own form validation library or with our own code.

In this article, we’ll look at how to validate forms dynamically with Vuelidate.

Dynamic Validation Schema

We can validate forms dynamically with Vuelidate.

For example, we can write:

<template>
  <div id="app">
    <div>
      <label>Name</label>
      <input v-model.trim="$v.name.$model">
      <div v-if="!$v.name.required">Name is required.</div>
    </div>

<div v-if="hasDescription">
      <label>Description</label>
      <input v-model.trim="$v.description.$model">
      <div v-if="!$v.description.required">Description is required.</div>
    </div>

<div>
      <label>Has Description</label>
      <input v-model="hasDescription" type="checkbox">
    </div>
  </div>
</template>
<script>
import { required } from "vuelidate/lib/validators";

export default {
  name: "App",
  data() {
    return {
      hasDescription: false,
      name: "",
      description: ""
    };
  },
  validations() {
    if (!this.hasDescription) {
      return {
        name: {
          required
        }
      };
    } else {
      return {
        name: {
          required
        },
        description: {
          required
        }
      };
    }
  }
};
</script>

We have the validations method to return an object with the fields to validate according to the this.hasDescription property.

In the template, we need to check the value if the hasDescription and only render the description field if hasDescription is true .

hasDescription ‘s value is controlled by the checkbox.

Dynamic Parameters

We can also set the name of the field dynamically.

For example, we can write:

<template>
  <div id="app">
    <div>
      <label>Name</label>
      <input v-model.trim="$v.name.$model">
      <div v-if="!$v.name[valName]">Name is invalid.</div>
    </div>
  </div>
</template>
<script>
import { minLength } from "vuelidate/lib/validators";

export default {
  name: "App",
  data() {
    return {
      name: "",
      minLength: 3,
      valName: "validatorName"
    };
  },
  validations() {
    return {
      name: {
        [this.valName]: minLength(this.minLength)
      }
    };
  }
};
</script>

We have a dynamic name for the validator for the name field.

This can be used in the template to check for the name.

Builtin Validators

There are various kinds of validators that comes with Vuelidate.

They include:

• required — checks if a field is required.
• requiredIf — a field is required given that the predicate is true
• requiredUnless — a field is required given that the predicate is false
• minLength — minimum length of input is required
• maxLength — max length of input required
• minValue — min numeric value
• maxValue — max numeric value
• between — numeric range
• alpha — alphabetical characters
• alphaNum — alphanumeric characters
• numeric — numbers
• integer — integers
• decimal — decimal numbers
• email — email address
• ipAddress — IP address
• macAddress — MAC address
• sameAs — checks if a field has the same value as another field
• url — URL
• or — passes when at least one of the validator passes
• and — passes when all validators pass
• not — passes when the provided validator doesn’t pass
• withParams — validator modifier for creating custom validator

For instance, we can write:

<template>
  <div id="app">
    <div>
      <label>field</label>
      <input v-model.trim="$v.field.$model">
      <div v-if="!$v.field.required">field is invalid.</div>
    </div>

    <div>
      <label>is optional</label>
      <input v-model="isOptional" type="checkbox">
    </div>
  </div>
</template>
<script>
import { requiredUnless } from "vuelidate/lib/validators";

export default {
  name: "App",
  data() {
    return {
      field: "foo",
      isOptional: true
    };
  },
  validations: {
    field: {
      required: requiredUnless("isOptional")
    }
  }
};
</script>

We have the isOptional field with the required property set to the requiredUnless validator.

requiredUnless(“isOptional”) means that the field is required when isOptional is true.

Conclusion

We can validate fields dynamically with Vuelidate.

It also comes with many validators built-in.